<template>
  <div>
    <h1>2323:{{ centerDialogVisible }}</h1>
  </div>
  <div>
    <el-dialog v-model="UpdateDialogVisible" :fullscreen="isFullScreen" width="72%" append-to-body :show-close="false">
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span :id="titleId" :class="titleClass">添加产品</span>
          <div class="header-buttons">
            <el-icon @click="toggleFullScreen" class="icon-button">
              <FullScreen v-if="!isFullScreen" /><CopyDocument v-else />
            </el-icon>
            <el-icon @click="CreateProductBillhandleClose" class="icon-button full-screen-btn"><Close /></el-icon>
          </div>
        </div>
      </template>

      <el-scrollbar :max-height="maxHeight + 'px'">
        <div>
          <el-row>
            <el-col :span="24">
              <el-form
                :inline="true"
                ref="CreateProductBillFormRef"
                :model="CreateProductBillForm"
                label-width="auto"
                class="demo-form-inline"
                :rules="CreateProductBillRules"
              >
                <el-form-item label="产品编码" prop="ProductBillNo">
                  <el-input
                    v-model="CreateProductBillForm.ProductBillNo"
                    placeholder="不输入则自动生成"
                    style="width: 270px"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item prop="ProductBillName" label="产品名称">
                  <el-input
                    v-model="CreateProductBillForm.ProductBillName"
                    placeholder="请输入产品产品名称"
                    style="width: 270px"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item label="尺寸" prop="Dimensions">
                  <el-input v-model="CreateProductBillForm.Dimensions" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <el-form-item label="型号" prop="Model">
                  <el-input v-model="CreateProductBillForm.Model" placeholder="请输入" style="width: 270px"> </el-input>
                </el-form-item>
                <el-form-item label="功能" prop="Function">
                  <el-input v-model="CreateProductBillForm.Function" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <el-form-item label="颜色" prop="Color">
                  <el-input v-model="CreateProductBillForm.Color" placeholder="请输入" style="width: 270px"> </el-input>
                </el-form-item>
                <el-form-item label="重量" prop="Weight">
                  <el-input v-model="CreateProductBillForm.Weight" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <el-form-item label="电压" prop="Voltage">
                  <el-input v-model="CreateProductBillForm.Voltage" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <el-form-item label="电池类型" prop="BatteryType">
                  <el-input v-model="CreateProductBillForm.BatteryType" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <el-form-item label="充电协议" prop="ChargingProtocol">
                  <el-input v-model="CreateProductBillForm.ChargingProtocol" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <!-- <el-form-item label="品牌" prop="Brand">
                <el-input v-model="CreateProductBillForm.Brand" placeholder="请输入" style="width: 270px"> </el-input>
              </el-form-item> -->
                <el-form-item label="电池容量（mAh）" prop="BatteryCapacity">
                  <el-input v-model="CreateProductBillForm.BatteryCapacity" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <el-form-item label="额定容量（mAh）" prop="RatedCapacity">
                  <el-input v-model="CreateProductBillForm.RatedCapacity" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>
                <el-form-item label="最大输出功率" prop="MaxOutputPower">
                  <el-input v-model="CreateProductBillForm.MaxOutputPower" placeholder="请输入" style="width: 270px">
                  </el-input>
                </el-form-item>

                <el-form-item label="计量单位" prop="MeasuringUnitId">
                  <el-select
                    v-model="CreateProductBillForm.MeasuringUnitId"
                    placeholder="请选择"
                    clearable
                    style="width: 270px"
                  >
                    <el-option
                      v-for="option in MeasuringUnitOptions"
                      :key="option.id"
                      :label="option.measuringUnitName"
                      :value="option.id"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="产品分类" prop="ProductClassifyId">
                  <el-tree-select
                    v-model="CreateProductBillForm.ProductClassifyId"
                    :data="sourceData"
                    filterable
                    style="width: 270px"
                    placeholder="请选择"
                  />
                </el-form-item>
                <el-form-item label="销售价" prop="SellingPrice">
                  <el-input-number
                    v-model="CreateProductBillForm.SellingPrice"
                    :precision="2"
                    :step="0.1"
                    :max="99999"
                    style="width: 270px"
                  />
                </el-form-item>
                <el-form-item label="工艺路线" prop="CraftBillId">
                  <el-select
                    v-model="CreateProductBillForm.CraftBillId"
                    placeholder="请选择"
                    clearable
                    style="width: 270px"
                    @change="handleCraftBillChange"
                  >
                    <el-option
                      v-for="option in CraftBillOptions"
                      :key="option.key"
                      :label="option.craftBillName"
                      :value="option.id"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-divider content-position="left">物料\工序列表</el-divider>

          <!-- 产品明细数据表格 -->
          <el-row>
            <el-col :span="24">
              <el-tabs type="border-card">
                <el-tab-pane label="BOM组成">
                  <!-- 添加BOM明细按钮 -->
                  <el-row>
                    <el-col :span="24">
                      <div style="margin: 10px 0px">
                        <el-button type="primary" plain @click="addBOMDetia()">添加物料</el-button>
                        <el-button type="danger" plain @click="deleteBOMDetia()">清空列表</el-button>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-table
                        :data="CreateProductcurrentPageData"
                        border
                        style="width: 100%"
                        max-height="400px"
                        show-overflow-tooltip
                        empty-text="暂无数据"
                      >
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" />
                        <el-table-column prop="materialsCode" label="物料编码" />
                        <el-table-column prop="materialsName" label="物料名称" />
                        <el-table-column prop="specification" label="规格" />
                        <el-table-column label="使用比例" align="center">
                          <template #default="scope">
                            <el-input-number v-model="scope.row.UsageRatio" :min="1" :max="9999" size="small" />
                          </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="90">
                          <template #default="scope">
                            <el-button
                              type="danger"
                              plain
                              size="small"
                              @click="DeleteCraftMaterialsDetiaSingle(scope.row.id)"
                            >
                              移除
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>

                  <!-- 分页 -->
                  <el-row>
                    <el-col :span="24">
                      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
                        <el-config-provider :locale="zhCn">
                          <el-pagination
                            @size-change="CreateProducthandleSizeChange"
                            @current-change="CreateProducthandleCurrentChange"
                            :current-page="CreateProductcurrentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="CreateProductpageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="CreateProductTotalItems"
                          />
                        </el-config-provider>
                      </div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="工序组成">
                  <el-row>
                    <el-col :span="24">
                      <el-table
                        :data="ProductCraftBillDetials"
                        border
                        style="width: 100%"
                        max-height="400px"
                        show-overflow-tooltip
                        empty-text="暂无数据"
                      >
                        <el-table-column label="排序">
                          <template #default="scope">
                            <span>第 {{ scope.row.processSort }} 道工序</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="process.processNo" label="工序编码" />
                        <el-table-column prop="process.processName" label="工序名称" />
                      </el-table>
                    </el-col>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="CreateProductBillhandleClose">取消</el-button>
          <el-button type="primary" @click="CreateProductBillDialog(CreateProductBillFormRef)">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script >
export default {
  props: ['centerDialogVisible', 'tableData'],
  data() {
    return {
      formInline: {},
      rules: {
        name: [{ required: true, trigger: 'blur', message: '名称不能为空' }]
      },
      dialogVisible: false
    }
  },

  methods: {
    openDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    }
  },
  watch: {
    centerDialogVisible: {
      immediate: true,
      handler(newVal) {
        this.dialogVisible = newVal
      }
    }
  }
}
</script>

<style lang="less" scoped>
/* 表格行悬停样式 */
/deep/ .el-table tbody tr:hover > td {
  background-color: #f3f2f2 !important;
  color: #409eff;
  cursor: pointer;
}
</style>